$(function(){

    var login = new Vue({
        el:'#loginBox',
        data(){
            var passneed = (value)=>{
                if(value.length<6||value.length>16)
                return false
                
                return true
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('请输入密码'));
                }else if(!passneed(value)) {
                    callback(new Error('密码的长度必须大于6位小于16位'))
                }   
                else {
                  if (this.registerMessage.user_password_again !== '') {
                    this.$refs.registerMessage.validateField('user_password_again');
                  }
                  callback();
                }
              };
            var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                
                callback(new Error('请再次输入密码'));
            }else if(!passneed(value)) {
                callback(new Error('密码的长度必须大于6位小于16位'))
            }  
            else if (value !== this.registerMessage.user_password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
            };

            var Numberpan = (value)=>{
                if(value.length!=11){
                    return false;
                }
                for(var i =0;i<value.length;i++){
                    if(value[i]>'9'||value[i]<'0')
                    return false;
                }
                return true;
            };
            var phoneNumber = (rule,value,callback) =>{
                if(value===''){
                    callback(new Error('请输入电话号码'));
                }else if(!Numberpan(value)){
                    callback(new Error('请输入正确的电话号码'));
                }else{
                    callback()
                }
            };
            var userName = (rule,value,callback)=>{
                if(value===''){
                    callback(new Error('请输入用户名！'));
                }else if(value.length<3||value.length>10){
                    callback(new Error('用户名需要大于3位小于10位'))
                }
                else{
                    callback();
                }
            }
            var useradress = (rule,value,callback)=>{
                if(value===''){
                    callback(new Error('请输入您的地址！'));
                }else{
                    callback();
                }
            }
            return{
                
                registerMessage:{//用户注册信息
                    user_name:"",
                    user_phone:"",
                    user_email:"",
                    user_address:"",
                    user_volunteer_state:"0",
                    user_info:"",
                    user_photo:"",
                    user_adopt_history:"0",
                    user_volunteer_info:"",
                    user_password:"",
                    user_password_again:'',
                },
                rules: {
                    user_password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    user_password_again: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    user_email:[
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    user_phone:[
                        { validator: phoneNumber, trigger: 'blur' }
                    ],
                    user_name:[
                        { validator: userName, trigger: 'blur' }
                    ],
                    user_address:[
                        { validator: useradress, trigger: 'blur' }
                    ]
                    
                },
                logginMessage:{
                    userlogin_name:"",
                    userlogin_password:"",
                    user_avater_url:'',
                },
                user_id:'',
                
            }
           
        },
        methods:{
            submitForm(formName) {
                
                this.$refs[formName].validate((valid) => {
                    
                  if (valid) {
                    axios.post("http://karrysmile.top/PetShelter/user/register", this.registerMessage).then(res => {
                        window.sessionStorage.setItem("user_id",JSON.stringify(res.data.data.user_id))
                        window.sessionStorage.setItem("userlogin_name",JSON.stringify(res.data.data.user_name))
                        window.sessionStorage.setItem("user_avater_url",JSON.stringify(res.data.data.user_photo))
                    window.location.href = "index.html"; 
                })
                  } else {
                    return false;
                  }
                });
              },
              resetForm(formName) {
                this.$refs[formName].resetFields();
              },
            outLogin(){
                window.sessionStorage.removeItem('user_id');
                window.sessionStorage.removeItem('userlogin_name');
                window.sessionStorage.removeItem('user_avater_url');
                window.location.href = "index.html";
            },
            beforeUpload(file){
                const isJPG = file.type === "image/jpeg";
                const isPNG = file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!(isJPG||isPNG)) {
                    this.$message.error('图片只能是JPG或PNG格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return (isJPG||isPNG) && isLt2M;
            },
            uploadSuccess(response, file){
                this.registerMessage.user_photo = response.data.imageUrl;
                this.$message({
                    type: response.flag ? 'success' : 'error',
                    message: response.message,
                })
            },
            // 获取sessionstorage里面的user_id
            getUser_id(){
                this.user_id = JSON.parse(window.sessionStorage.getItem('user_id'));
                this.logginMessage.userlogin_name = JSON.parse(window.sessionStorage.getItem('userlogin_name'));
                this.logginMessage.user_avater_url  = JSON.parse(window.sessionStorage.getItem('user_avater_url'));
            },
            // 登录注册框的显示功能
            Loginhandle(){
                
                    $('.login-box').show();
                    $('.mask').show();
                
                    $('.login-box #closeBtn').click(function(){
                        $('.login-box').hide();
                        $('.mask').hide();
                        $('.Register').hide();
                        $('.Login').show();
                    })
                
                    $('#GoRegister').click(function(){
                        $('.Register').show();
                        $('.Login').hide();
                
                        $('#registerpass').focus(function(){
                            // 点击密码框，获得焦点追加样式password
                            $('#reowl').addClass('password');
                        }).blur(function(){
                            // 移除样式password
                            $('#reowl').removeClass('password');
                        })
                        $('#registerpass1').focus(function(){
                            // 点击密码框，获得焦点追加样式password
                            $('#reowl').addClass('password');
                        }).blur(function(){
                            // 移除样式password
                            $('#reowl').removeClass('password');
                        })
                       
                    })
                    $('#GoLogin').click(function(){
                        $('.Register').hide();
                        $('.Login').show();
                
                    })
                    
                    $('#password').focus(function(){
                        // 点击密码框，获得焦点追加样式password
                        $('#owl').addClass('password');
                    }).blur(function(){
                        // 移除样式password
                        $('#owl').removeClass('password');
                    })
                    
                
            },
            loginButton(){
                axios.post("http://karrysmile.top/PetShelter/user/login", this.logginMessage).then(res => {
                    if(res.data.message == '不匹配错误'){
                        alert("密码错误")
                        return;
                    }else if(res.data.message=='该用户不存在'){
                        alert("该用户不存在")
                        return 
                    }else{
                        alert('登录成功')
                    }  
                    this.logginMessage.userlogin_name = res.data.data.user_name
                    this.logginMessage.user_avater_url = res.data.data.user_photo
                    this.user_id = res.data.data.user_id 
                    window.sessionStorage.setItem("user_id",JSON.stringify(res.data.data.user_id))
                    window.sessionStorage.setItem("user_avater_url",JSON.stringify(res.data.data.user_photo))						
                    window.sessionStorage.setItem("userlogin_name",JSON.stringify(res.data.data.user_name))						
                    $('.login-box').hide();
                    $('.mask').hide();
                    $('.Register').hide();
                    $('.Login').show();	
                })
            },
            
        },
        mounted() {
            this.getUser_id()
            
        },

    })


    var footer = new Vue({
        el:'#footer',
        data:{
            webinfo: {
                webinfo_id: '', 
                
                webinfo_phone: "", 
                
                webinfo_email: "", 
                
                webinfo_account: "  ", 
                
                webinfo_account_img: "", 
                
                webinfo_address: "", 
                
                webinfo_foot: "", 
                
                webinfo_beian: "" 
                 
                } 
        },
        methods: {
            getFooterMessage(){
                if(JSON.parse(window.sessionStorage.getItem('webinfo_id'))){
                    this.webinfo.webinfo_id = JSON.parse(window.sessionStorage.getItem('webinfo_id'));
                    this.webinfo.webinfo_phone = JSON.parse(window.sessionStorage.getItem('webinfo_phone'));
                    this.webinfo.webinfo_email = JSON.parse(window.sessionStorage.getItem('webinfo_email'));
                    this.webinfo.webinfo_account = JSON.parse(window.sessionStorage.getItem('webinfo_account'));
                    this.webinfo.webinfo_account_img = JSON.parse(window.sessionStorage.getItem('webinfo_account_img'));
                    this.webinfo.webinfo_address = JSON.parse(window.sessionStorage.getItem('webinfo_address'));
                    this.webinfo.webinfo_foot = JSON.parse(window.sessionStorage.getItem('webinfo_foot'));
                    this.webinfo.webinfo_beian = JSON.parse(window.sessionStorage.getItem('webinfo_beian'));
                    return 
                }else{
                    axios.get('http://karrysmile.top/PetShelter/webinfo/getWebinfo').then(res=>{
                        this.webinfo = res.data.data.webinfo
                        window.sessionStorage.setItem("webinfo_id",JSON.stringify(this.webinfo.webinfo_id))						
                        window.sessionStorage.setItem("webinfo_phone",JSON.stringify(this.webinfo.webinfo_phone))						
                        window.sessionStorage.setItem("webinfo_email",JSON.stringify(this.webinfo.webinfo_email))						
                        window.sessionStorage.setItem("webinfo_account",JSON.stringify(this.webinfo.webinfo_account))						
                        window.sessionStorage.setItem("webinfo_account_img",JSON.stringify(this.webinfo.webinfo_account_img))						
                        window.sessionStorage.setItem("webinfo_address",JSON.stringify(this.webinfo.webinfo_address))						
                        window.sessionStorage.setItem("webinfo_foot",JSON.stringify(this.webinfo.webinfo_foot))						
                        window.sessionStorage.setItem("webinfo_beian",JSON.stringify(this.webinfo.webinfo_beian))						

                    })

                }                 
            }
        },
        mounted() {
            this.getFooterMessage()
        },
    })


        //=================================== 登录注册框的实现=============================================
        
        
        // ==========================index你的下一个宠物何必是宠物======================
        $(document).ready(function(){//在文档加载完毕后执行
        
            var video_f = document.querySelectorAll('.index-index-content .video-float ul li')
            video_f.forEach((item,index)=>{
                item.style.animation=`2s ease-in-out slideIn forwards ${index* 0.1 +0.5}s`
                item.style.display='block';
            })
            
            $(window).scroll(function(){//开始监听滚动条
        
                //获取当前滚动条高度
        
                var topp = $(document).scrollTop();//页面距离顶部高度
                var index_height = document.documentElement.scrollHeight;//页面总高度
                const client_height = document.documentElement.clientHeight;//可视窗口高度
        
                //BUG！！！！
                //发现scale或者translate导致屏幕宽度超过原来的宽度时候，clientHeight会改变
                
                // 获取滚动监听距离页面顶部高度
                // ========================第一个文案的动画JS===============================
                if(topp > client_height*0.4 ){
                    
                    var index_text1 = document.querySelectorAll('.text1 .left ul li')
                    var index_img1 = document.querySelector('.text1 .right')
                    // 前面的是动画执行时间 后面的是动画执行前等待时间
                    index_img1.style.animation=`.8s ease-in-out slideIn forwards 0s`
                    
        
                    index_text1.forEach((item,index)=>{
                            item.style.animation=`1s ease-in-out slideIn forwards ${index* 0.1 +0.3}s`
                            item.style.display='block';
                    })
                }
        
                // ========================第二个文案的动画JS===============================
        
                if(topp>0.8*client_height){
                    var index_text2 = document.querySelectorAll('.text2 .right ul li')
                    var index_img2 = document.querySelector('.text2 .left')
                     index_text2.forEach((item,index)=>{
        
                        item.style.animation=`1s ease-in-out slideIn forwards ${index* 0.1 +0.3}s`
                        item.style.display='block';
                     })
                }
        
                // ========================第三个文案的动画JS===============================
        
                if(topp>1.6*client_height){
                    var index_text3 = document.querySelectorAll('.text3 .left ul li')
                    var index_img3 = document.querySelector('.text3 .right')
                    index_text3.forEach((item,index)=>{
                        item.style.animation=`2s ease-in-out imgscale_min_to_big forwards ${index* 0.1 +0.3}s`
                        item.style.display='block';
                     })
                }
                
                // ========================第四个文案的动画=====================================
                var linear=0;
               if(topp>client_height*2.85&&topp<client_height*4.85){
                
                const sticky_h1 = document.querySelectorAll('.text4 .right ul li');
                const sticky_img = document.querySelector('.text4 .left img');
                linear = (topp - client_height*2.85)/(client_height*2-client_height);
                if(linear>1)
                linear=1;
                
                sticky_h1[0].style.setProperty('--percentage',`${linear}%`)
                sticky_h1[1].style.setProperty('--percentage',`${linear}%`)
                sticky_img.style.setProperty('--size',`${linear}`)
               }
            //    ===================================第五个动画文案==============================
            if(topp>client_height*3.65&&topp<client_height*8.85){
                var text5 = document.querySelectorAll('.text5 .sticky .left ul li');
                var img5 = document.querySelectorAll('.text5 .sticky .right ul li')
                    var cnt = (topp-client_height*3.85)/client_height;
                    var ans =cnt%1;//获取小数部分
                    for(var i=0;i<text5.length;i++){
                        text5[i].style.display='none';
                        img5[i].style.display='none';
                    }
                    var temp = Math.floor(cnt);
                    if(temp<0)
                        temp=0;
                    if(temp>text5.length-1)
                        temp=text5.length-1;
                    text5[temp].style.display='block'
                    text5[temp].style.setProperty('--opacity',`${ans}`)
                    img5[temp].style.display='block'
                    img5[temp].style.setProperty('--opacity',`${ans}`)
        
            }
            //    ===================================第六个动画文案==============================
            var text6_First_sticky = document.querySelector('.text6 .sticky');
            if(topp>client_height*8.85&&topp<client_height*12.85){
                $('.text6 .sticky .left').show();
                $('.text6 .sticky .right').show();
                
                var text6_li = document.querySelectorAll('.text6 .sticky .right ul li')
        
                var cnt2 = (topp - client_height*8.75)/client_height;
                
                if(cnt2<0)
                    cnt2=0;
                ans = cnt2%1;
               
                for(var i = 0;i<text6_li.length;i++){
                    text6_li[i].style.display = 'none'
                }
                temp = Math.floor(cnt2); 
                if(temp >text6_li.length-1){
                    temp =text6_li.length-1
                }
                text6_li[temp].style.display="block";
                text6_li[temp].style.setProperty('--opacity',`${ans}`)
            }
        
            if(topp>client_height*12.65&&topp<client_height*13.85){
                $('.text6 .sticky .after').hide();
                cnt = (topp-client_height*12.85);
                var ans3 = cnt/client_height;
                
                text6_First_sticky.style.setProperty('--change',`${1-ans3}`)
                
            }
            // after之后的显示
            if(topp>client_height*13.85&&topp<client_height*14.85){
                $('.text6 .sticky .left').hide()
                $('.text6 .sticky .right').hide()
                var after = document.querySelector('.text6 .sticky .after');
                after.style.display='block';
                cnt = (topp-client_height*13.85);
                
                var ans4 = cnt/client_height;
                after.style.setProperty('--change',`${ans4}`)
            }
            if(topp>client_height*14.85&&topp<client_height*16.85){
                var ans5;
                cnt = topp - client_height*14.85;
                ans5 = cnt/client_height;
                ans5= ans5%1;
                
                var after_li = document.querySelectorAll(".text6 .sticky .after ul li")
                for(var i=0;i<after_li.length;i++){
                    after_li[i].style.display='none';
                }
                after_li[Math.floor(cnt/client_height)].style.display='block';
                after_li[Math.floor(cnt/client_height)].style.setProperty('--change',`${ans5}`)
                
            }
            
            if(topp>client_height*17.85&&topp<21.85*client_height){
                
                $('.text7 .sitcky .rex .center ul').show();
                var text7_li = document.querySelectorAll('.text7 .sticky .rex .center li');
                var cnt = (topp - client_height*17.85)/client_height;
                if(cnt<0)
                    cnt=0;
                ans = cnt%1;
                
                if(cnt<=3){
                    for(var i = 0;i<text7_li.length;i++){
                        text7_li[i].style.display = 'none'
                    }
                    temp = Math.floor(cnt); 
                    if(temp >text7_li.length-1){
                        temp =text7_li.length-1
                    }
                    text7_li[temp].style.display="block";
                    text7_li[temp].style.setProperty('--opacity',`${ans}`)
                }
                 
        
        
        
            }
        
            //=========================下面是宠物收容所的介绍模块================
                var div = document.querySelectorAll(".introduce .sticky div")
                if(topp>21.55*client_height&&topp<22.85*client_height){  
                    $('.text7 .sitcky .rex .center ul').hide();
                      $('.introduce .First .circle1').animate({
                            height:'300px',
                            width:'300px'
                      },'slow');       
                      $('.introduce .First .circle2').animate({
                        height:'450px',
                        width:'450px'
                      },'slow');
                      $('.introduce .First .circle3').animate({
                        height:'700px',
                        width:'700px'
                      },'slow');
                      $('.introduce .First .circle4').animate({
                        height:'700px',
                        width:'700px',
                      },'slow');
                      $('.introduce .First .circle5').animate({
                        height:'400px',
                        width:'400px'
                      },'slow');
                      $('.introduce .First .circle4 img').animate({
                        opacity:'1', 
                        height:'100px',
                        width:'auto',
                      },'slow');
                }
                if(topp>22.85*client_height&&topp<24.05*client_height){  
                    $('.introduce  .Two .circle1').animate({
                        height:'300px',
                        width:'300px'
                    },'slow');
                    $('.introduce .Two .circle').animate({
                        height:'700px',
                        width:'700px'
                    },'slow');
                    
                    $('.introduce .Two h1').animate({
                        fontSize:'4rem',
                    },'slow');
        
        
                }
                if(topp>23.85*client_height&&topp<25.05*client_height){  
                    $('.introduce .Three .content .middle .circle').animate({
                        height:'300px',
                        width:'300px'
                    },'slow');
                }
                if(topp>27.2*client_height){  
                    $('.text8 h1').animate({
                        fontSize:'3rem',
                        opacity:'1',
                    },'slow')
                    $('.text8 img').animate({
                        opacity:'1',
                    },'slow')
                }
            })
            $('.introduce .Four .content .bottom .card').on('click',function(e){
                var card = $(e.currentTarget)
                $(card).toggleClass('active')    
            })
        
        })
        
        

})